// tools
(function (window, undefined) {
    const Tools = {
        getRandom: function (min, max) {
            min = Math.ceil(min)
            max = Math.floor(max)

            return Math.floor(Math.random() * (max - min + 1)) + min
        }
    }
    window.Tools = Tools
})(window, undefined);

// food
(function (window, undefined) {
    class Food {
        constructor({ width = 20, height = 20, left = 0, top = 0, backgroundColor = "skyblue" }) {
            this.width = width
            this.height = height

            this.left = left
            this.top = top

            this.color = backgroundColor

            this.bodys = []
        }
        render(parent, { left, top }) {
            const fo = document.createElement("div")
            fo.style.position = "absolute"
            fo.style.width = this.width + "px"
            fo.style.height = this.height + "px"

            fo.style.left = left + "px"
            fo.style.top = top + "px"

            fo.style.backgroundColor = this.color
            this.bodys.push(fo)

            parent.appendChild(fo)
        }
        position() {
            const left = Tools.getRandom(0, tage.offsetWidth / this.width - 1) * this.width
            const top = Tools.getRandom(0, tage.offsetHeight / this.width - 1) * this.width

            return { left, top }
        }
        removeFood(parent, i) {
            parent.removeChild(this.bodys[i])
            this.bodys.splice(i, 1)
        }
    }
    window.Food = Food
})(window, undefined);

// snake
(function (window, undefined) {
    class Snake {
        constructor({ width = 20, height = 20, direction = "right" }) {
            this.width = width
            this.height = height


            this.eles = [
                { left: 3, top: 1, color: "red" },
                { left: 2, top: 1, color: "blue" },
                { left: 1, top: 1, color: "blue" }
            ]

            this.direction = direction

            this.snakes = []
        };
        render(parent) {
            for (let i = 0; i < this.eles.length; i++) {
                const ele = document.createElement("div")
                ele.style.position = "absolute"


                ele.style.top = this.eles[i].top * this.height + "px"
                ele.style.left = this.eles[i].left * this.width + "px"

                ele.style.width = this.width + "px"
                ele.style.height = this.height + "px"

                ele.style.backgroundColor = this.eles[i].color

                this.snakes.push(ele)
                parent.appendChild(this.snakes[i])

                // console.log(this.snakes);

            }
        };
        moveSnake() {
            for (let i = this.eles.length - 1; i > 0; i--) {
                this.eles[i].left = this.eles[i - 1].left
                this.eles[i].top = this.eles[i - 1].top
            }
            const head = this.eles[0]
            switch (this.direction) {
                case "left":
                    head.left -= 1
                    break;
                case "top":
                    head.top -= 1
                    break;
                case "right":
                    head.left += 1
                    break;
                case "bottom":
                    head.top += 1
                    break;

            }
        };
        removeSnake(parent) {
            for (let i = this.snakes.length - 1; i >= 0; i--) {
                // console.log(parent.children[i]);
                parent.removeChild(this.snakes[i])
                this.snakes.pop()

            }
        };
    }
    window.Snake = Snake
})(window, undefined);

// game
(function (window, undefined) {
    class Game {
        constructor(tage, score) {
            this.food = new Food({})
            this.food = new Food({})
            this.food = new Food({})
            this.snake = new Snake({})
            this.tage = tage
            this.score = score
        }
        start() {
            this.food.render(this.tage, this.food.position())
            this.food.render(this.tage, this.food.position())
            this.food.render(this.tage, this.food.position())
            this.snake.render(this.tage)
            this.runSnake()
        }
        runSnake() {
            const timer = setInterval(function () {

                this.snake.moveSnake()
                if (this.isEnd(this.tage)) {
                    clearInterval(timer)
                }
                // this.moreLong()
                this.snake.removeSnake(this.tage)
                this.snake.render(this.tage)
                this.keyCode()
            }.bind(this), 150)
            // console.log(this.snake.direction);
        }
        keyCode() {
            document.onkeydown = function (e) {
                switch (e.keyCode) {
                    case 87:
                        this.snake.direction = "top"
                        break;
                    case 65:
                        this.snake.direction = "left"
                        break;
                    case 83:
                        this.snake.direction = "bottom"
                        break;
                    case 68:
                        this.snake.direction = "right"
                        break;
                }
            }.bind(this)
        }
        moreLong() {
            for (let i = this.food.bodys.length - 1; i >= 0; i--) {
                if (this.food.bodys[i].offsetTop === this.snake.eles[0].top * this.snake.height && this.food.bodys[i].offsetLeft === this.snake.eles[0].left * this.snake.width) {
                    this.food.removeFood(this.tage, i)
                    this.snake.eles.push({
                        left: this.snake.eles[this.snake.eles.length - 1].left,
                        top: this.snake.eles[this.snake.eles.length - 1].top,
                        color: this.snake.eles[this.snake.eles.length - 1].color
                    })
                    this.food.render(this.tage, this.food.position())
                    this.addOne()
                    // console.log(this.snake.eles);
                }
            }
        };
        addOne() {
            this.score.innerHTML = parseInt(this.score.innerText) + 1
        }

        isEnd(parent) {
            if (this.snake.eles[0].top < 0 || this.snake.eles[0].top >= parent.offsetHeight / this.snake.height || this.snake.eles[0].left >= parent.offsetWidth / this.snake.width || this.snake.eles[0].left < 0) {
                this.tage.classList = "tage show1"
                return true
            }
            for (let i = 1; i < this.snake.eles.length; i++) {
                if (this.snake.eles[i].left === this.snake.eles[0].left && this.snake.eles[i].top === this.snake.eles[0].top) {
                    this.tage.classList = "tage show2"
                    return true
                }
            }
            this.moreLong()
        };
    }
    window.Game = Game
})(window, undefined);

// main
(function (window, undefined) {
    const tage = document.getElementById("tage")
    const score = document.getElementById("score")
    const btn = document.getElementById("btn")

    btn.onclick = function () {
        location.reload()
    }
    const game = new Game(tage, score)
    game.start()
})(window, undefined);